<template>
    <div id="notice">
        <el-col :span="24" class="toolbar">
            <el-button :plain="true" type="success" @click="back">返回APP首页设置</el-button>
            <el-button :plain="true" type="info" @click="newSilde">新增公告</el-button>
        </el-col>
        <el-table :data="moduleList" style="width: 100%" border :default-sort="{prop: 'sort'}" v-loading="loading">
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="sort" label="排序" width="100" sortable>
                <template slot-scope="scope">
                    <el-input v-model.number="scope.row.sort" placeholder="请输入内容"
                              @blur="inputSort(scope.$index, scope.row)"
                              @focus="inputFocus(scope.$index, scope.row)"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="标题(点击可编辑)">
                <template slot-scope="scope">
                    <div @click="titleEdit(scope.row)" style="cursor: pointer">
                        <p v-text="scope.row.title"></p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="更多(点击可编辑)">
                <template slot-scope="scope">
                    <div class="homeType" @click="openDia(scope.$index, scope.row)">
                        <p v-if="scope.row.type === 0">不操作</p>
                        <p v-else-if="scope.row.type === 1">打开链接</p>
                        <p v-else-if="scope.row.type === 10">打开分析列表</p>
                        <p v-else-if="scope.row.type === 11">打开分析详情</p>
                        <p v-else-if="scope.row.type === 20">打开课节详情</p>
                        <p v-else-if="scope.row.type === 22">自定义课程列表</p>
                        <p v-else-if="scope.row.type === 30">打开活动列表</p>
                        <p v-else-if="scope.row.type === 31">打开学股堂</p>
                        <p v-else-if="scope.row.type === 32">打开模拟炒股</p>
                        <p v-else-if="scope.row.type === 40">打开证券开户列表</p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                    <el-button type="primary" icon="delete" size="small" @click="del(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>


        <!--新增-->
        <el-dialog title="新增公告" :visible.sync="dialogNewVisible" :before-close="dialogCan">
            <el-row class="elRow" :gutter="20" >
                <el-col class="elCol text-left" :span="4">标题</el-col>
                <el-col class="elCol" :span="20">
                    <el-input v-model="newMessages.title" placeholder="请输入内容"></el-input>
                </el-col>
            </el-row>
            <el-row class="elRow" :gutter="20" >
                <el-col class="elCol text-left" :span="4">排序</el-col>
                <el-col class="elCol" :span="20" style="text-align: left">
                    <el-input v-model.number="newMessages.sort" placeholder="请输入排序" style="width: 217px;"></el-input>
                </el-col>
            </el-row>

            <type :message="newMessages"></type>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addNews">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="更改类型" :visible.sync="dialogTableVisible" :before-close="dialogCan" size="small">
            <type :message="messages"></type>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="ensure">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="更改标题" :visible.sync="dialogTableVisible2" size="tiny" :before-close="dialogCan">
            <el-input v-model="titleInput.title" placeholder="请输入内容"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="ensureI">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import util from '../../common/js/util';
    import chooseType from '../../common/js/type';
    import {noticeList,noticeUpdate,noticeDelete,noticeAdd} from '../../api/api';
    import type from './type.vue';
    export default {
        data() {
            return {
                dialogNewVisible: false,
                moduleList: [],
                loading: false,
                sortNum: null,
                /*新增*/
                newMessages: {
                    title: '',
                    sort: '',
                    type: 1,
                    value: '',
                },
                /*弹窗选择类型*/
                dialogTableVisible: false,
                messages: null,
                dialogTableVisible2: false,
                titleInput: ''
            }
        },
        methods: {
            back(){
                this.$router.push('/appHomeSetting');
            },
            newSilde(){
                this.dialogNewVisible = true;
                this.newMessages = {
                    title: '',
                    sort: '',
                    type: 1,
                    value: '',
                }
            },
            notice(){
                let para = {};
                this.loading = true;
                noticeList(para).then((res) => {
                    this.loading = false;
                    this.moduleList = res.data;
                    console.log(res);
                })
            },
            /*排序*/
            inputFocus(index, row) {
                this.sortNum = row.sort;
            },
            inputSort(index, row) {
                if (this.sortNum === row.sort) return;
                this.loading = true;
                noticeUpdate(row).then((res) => {
                    this.$message({message: res.message, type: 'success'});
                    this.notice();
                    this.loading = false;
                })
            },
            /*删除*/
            del(row){
                console.log(row);
                this.loading = true;
                let para = {};
                noticeDelete(row.id,para).then(res => {
                    this.loading = false;
                    this.$message({message: res.message, type: 'success'});
                    this.notice();
                })
            },
            dialogCan(done) {
                this.dialogTableVisible = false;
                this.notice();
                done();
            },
            /*新增*/
            addNews(){
                if(this.newMessages.title === '' || this.newMessages.sort === ''){
                    this.$message({message: '请填写完成所有的数据', type: 'error'});
                    return;
                }
                if(chooseType.verify(this.newMessages)) {
                    this.$message({message: '请填写完成所有的数据', type: 'error'});
                    return;
                }
                noticeAdd(this.newMessages).then(res => {
                    console.log(res);
                    this.dialogNewVisible = false;
                    this.$message({message: res.message, type: 'success'});
                    this.notice();
                })
            },
            /*打开弹窗*/
            openDia(index, row) {
                console.log(row);
                this.dialogTableVisible = true;
                this.messages = row;
            },
            ensure() {
                if(chooseType.verify(this.messages)) {
                    this.$message({message: '请填写完成所有的数据', type: 'error'});
                    return;
                }
                noticeUpdate(this.messages).then((res) => {
                    this.$message({message: res.message, type: 'success'});
                    this.notice();
                    this.dialogTableVisible = false;
                })
            },
            titleEdit(row){
                this.dialogTableVisible2 = true;
                this.titleInput = row
            },
            ensureI(){
                if(this.titleInput.title === ''){this.$message({message: '请输入标题', type: 'error'});return;}
                noticeUpdate(this.titleInput).then((res) => {
                    this.$message({message: res.message, type: 'success'});
                    this.notice();
                    this.dialogTableVisible2 = false;
                })
            }
        },
        mounted(){
            this.notice();
        },
        components: {
            type
        }
    }
</script>
<style type="text/scss" lang="scss" scoped>
    #notice {
        text-align: center;
        .toolbar{
            text-align: left;
        }
        .homeType {
            width: 100%;
            height: 100%;
            cursor: pointer;
            padding: 1px;
        }
        .mainImg {
            width: 50px;
            height: 50px;
        }
        .iconImg {
            cursor: pointer;
            img {
                vertical-align: middle;
                padding: 20px;
            }
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #20a0ff;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .elRow{
            .text-left{
                text-align: right;
            }
            .elCol{
                line-height: 36px;
                margin-bottom: 20px;
                :last-of-type{
                    margin-bottom: 0;
                }
                .addButton{
                    width: 100%;
                }
                .elOption{
                }
                .el-input{
                    width: 100%;
                }
            }
        }
    }
</style>